<template>
  <div class="page light">
    <div class="page-main-no2">
      <div class="ksd-xqui-body">
        <div class="xquimini-content-page" style="height: calc(100% - 36px)">
          <div class="xquimini-container xquimini-page-anim">
            <div class="xquimini-main">
              <fieldset class="table-search-fieldset">
                <legend>搜索信息</legend>
                <div style="margin: 10px 10px 10px 10px;clear: both">
                  <form action="" class="xqui-form xqui-form-pane">
                    <div class="xqui-form-item">
                      <div class="xqui-inline"><label class="xqui-form-label">关键词</label>
                        <div class="xqui-input-inline"><input autocomplete="off" class="xqui-input" type="text"
                                                              v-model.lazy.trim="conditionVal"></div>
                      </div>
                      <div class="xqui-inline">
                        <button @click.prevent="finditemList" class="xqui-btn xqui-btn-primary"
                                lay-filter="data-search-btn" lay-submit="" type="submit">搜 索
                        </button>
                        <button class="xqui-btn xqui-btn-primary" @click.prevent="addCategory"
                                lay-filter="data-search-btn" lay-submit="" type="submit">添 加
                        </button>
                      </div>

                    </div>
                  </form>
                </div>
              </fieldset>
              <div class="xqui-form xqui-border-box xqui-table-view" lay-filter="LAY-table-1" lay-id="currentTableId"
                   style=" ">
                <div class="xqui-table-box">
                  <div class="xqui-table-header">
                    <table border="0" cellpadding="0" cellspacing="0" class="xqui-table" lay-skin="line">
                      <thead>
                      <tr>
                        <th class=" xqui-table-col-special" data-field="0" data-key="1-0-0" data-unresize="true">
                          <div class="xqui-table-cell laytable-cell-checkbox"></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>id</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>标题</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>图标</span></div>
                        </th>
                        <th class=" xqui-unselect" data-field="id" data-key="1-0-1">
                          <div class="xqui-table-cell"><span>父ID</span></div>
                        </th>
                        <th class="" data-field="itemname" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>排序</span></div>
                        </th>
                        <th class="" data-field="itemname" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>状态</span></div>
                        </th>
                        <th class="" data-field="itemname" data-key="1-0-2">
                          <div class="xqui-table-cell"><span>创建时间</span></div>
                        </th>
                        <th class=" xqui-table-col-special" data-field="10" data-key="1-0-10" data-minwidth="150">
                          <div align="center" class="xqui-table-cell"><span>操作</span></div>
                        </th>
                      </tr>
                      </thead>
                      <tbody>
                      <tr v-if="showEdit" data-row-key="1" class="pug-table-row pug-table-row-level-0">
                        <td class="pug-table-cell"></td>
                        <td class="pug-table-cell">{{ category.id }}</td>
                        <td class="pug-table-cell">
                          <div class="pug-row pug-form-item pug-form-item-has-success"
                               style="margin: -5px 0px; row-gap: 0px;">
                            <div class="pug-col pug-form-item-control">
                              <div class="pug-form-item-control-input">
                                <div class="pug-form-item-control-input-content"><span
                                  class="pug-input-affix-wrapper"><input placeholder="请输入"
                                                                         type="text"
                                                                         v-model="category.name"
                                                                         class="pug-input"
                                ></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td class="pug-table-cell">
                          <div class="pug-row pug-form-item pug-form-item-has-success"
                               style="margin: -5px 0px; row-gap: 0px;">
                            <div class="pug-col pug-form-item-control">
                              <div class="pug-form-item-control-input">
                                <div class="pug-form-item-control-input-content"><span
                                  class="pug-input-affix-wrapper"><input placeholder="请输入"
                                                                         type="text"
                                                                         v-model="category.icon"
                                                                         class="pug-input"
                                ></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td class="pug-table-cell">
                          <div class="pug-row pug-form-item"
                               style="margin: -5px 0px; row-gap: 0px;">
                            <div class="pug-col pug-form-item-control">
                              <div class="pug-form-item-control-input">
                                <div class="pug-form-item-control-input-content"><span
                                  class="pug-input-affix-wrapper"><input placeholder="请输入"
                                                                         type="text"
                                                                         v-model="category.pid"
                                                                         class="pug-input"
                                ></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td class="pug-table-cell">
                          <div class="pug-row pug-form-item"
                               style="margin: -5px 0px; row-gap: 0px;">
                            <div class="pug-col pug-form-item-control">
                              <div class="pug-form-item-control-input">
                                <div class="pug-form-item-control-input-content"><span
                                  class="pug-input-affix-wrapper"><input placeholder="请输入"
                                                                         type="text"
                                                                         class="pug-input"
                                                                         v-model="category.sorted"></span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </td>
                        <td class="pug-table-cell">{{ category.status == 1 ? "发布" : "未发布" }}</td>
                        <td class="pug-table-cell">{{ category.createTime || "" }}</td>
                        <td class="pug-table-cell" style="text-align: center;">
                          <div class="pug-space pug-space-horizontal pug-space-align-center"
                               style="gap: 8px;">
                            <div class="pug-space-item" style=""><a
                              @click.prevent="saveCategory">{{ category.id ? "修改" : "保存" }}</a></div>
                            <div class="pug-space-item"><a @click.prevent="cancleCategory">取消</a></div>
                          </div>
                        </td>
                      </tr>
                      <template :key="item.id" class="" data-index="0" v-for="(item , index) in items">
                        <tr @click="expandChild(index)">
                          <td class="xqui-table-col-special" data-field="0" data-key="1-0-0" style="width: 40px;">
                            <div class="xqui-table-cell laytable-cell-checkbox">
                              <span v-if="item.children.length > 0"><i
                                :class="['iconfont','iconfont',item.expand?'icon-zhankai1':'icon-zhankai']"></i></span>
                            </div>
                          </td>
                          <td class="" data-field="id" data-key="1-0-1">
                            <div class="xqui-table-cell">
                              {{ item.id }}
                            </div>
                          </td>
                          <td class="" data-field="itemname" data-key="1-0-2">
                            <div class="xqui-table-cell">{{ item.name }}</div>
                          </td>
                          <td class="" data-field="itemname" data-key="1-0-2">
                            <div class="xqui-table-cell">{{ item.icon }}</div>
                          </td>
                          <td class="" data-field="sex" data-key="1-0-3">
                            <div class="xqui-table-cell">{{ item.pid }}</div>
                          </td>
                          <td class="" data-field="city" data-key="1-0-4">
                            <div class="xqui-table-cell">{{ item.sorted }}</div>
                          </td>
                          <td class="" data-field="city" data-key="1-0-4">
                            <div class="xqui-table-cell">{{ item.status == 1 ? "发布" : "未发布" }}</div>
                          </td>
                          <td class="" data-field="city" data-key="1-0-4">
                            <div class="xqui-table-cell">{{ item.createTime }}</div>
                          </td>
                          <td data-field="10" data-key="1-0-10" align="center" data-off="true" data-minwidth="150"
                              class="xqui-table-col-special">
                            <div class="xqui-table-cell">
                              <a @click.prevent="addChildItem(index)"
                                 class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                                class="iconfont icon-bianji"></i>添加子集</a>
                              <a @click.prevent="updateItem(index,-1)"
                                 class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                                class="iconfont icon-bianji"></i>编辑</a>
                              <a @click.prevent="deleteitem(index)"
                                 class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete" lay-event="delete"><i
                                class="iconfont icon-remove2"></i>删除</a>
                            </div>
                          </td>
                        </tr>

                        <template v-for="(child,cindex) in item.children" :key="cindex">
                          <tr v-show="child.expand" style="background: #f8f8f8;">
                            <td class="xqui-table-col-special" data-field="0" data-key="1-0-0">
                            </td>
                            <td class="" data-field="id" data-key="1-0-1">
                              <div class="xqui-table-cell">{{ child.id }}</div>
                            </td>
                            <td class="" data-field="itemname" data-key="1-0-2">
                              <div class="xqui-table-cell">{{ child.name }}</div>
                            </td>
                            <td class="" data-field="itemname" data-key="1-0-2">
                              <div class="xqui-table-cell">{{ child.icon }}</div>
                            </td>
                            <td class="" data-field="sex" data-key="1-0-3">
                              <div class="xqui-table-cell">{{ child.pid }}</div>
                            </td>
                            <td class="" data-field="city" data-key="1-0-4">
                              <div class="xqui-table-cell">{{ child.sorted }}</div>
                            </td>
                            <td class="" data-field="city" data-key="1-0-4">
                              <div class="xqui-table-cell">{{ child.status == 1 ? "发布" : "未发布" }}</div>
                            </td>
                            <td class="" data-field="city" data-key="1-0-4">
                              <div class="xqui-table-cell">{{ child.createTime }}</div>
                            </td>
                            <td data-field="10" data-key="1-0-10" align="center" data-off="true" data-minwidth="150"
                                class="xqui-table-col-special">
                              <div class="xqui-table-cell">
                                <a @click.prevent="updateItem(index,cindex)"
                                   class="xqui-btn xqui-btn-normal xqui-btn-xs data-count-edit" lay-event="edit"><i
                                  class="iconfont icon-bianji"></i>编辑</a>
                                <a @click.prevent="deleteitem(index)"
                                   class="xqui-btn xqui-btn-xs xqui-btn-danger data-count-delete" lay-event="delete"><i
                                  class="iconfont icon-remove2"></i>删除</a>
                              </div>
                            </td>
                          </tr>
                        </template>
                      </template>
                      </tbody>
                      <tfoot>
                      <tr>
                        <td colspan="20">
                          <div class="text-center ksd-empty" v-if="total == 0"><i
                            class="iconfont icon-zanwu2" style="font-size: 132px;color:#ddd;"></i> <br>
                            <span>暂无数据</span></div>
                        </td>
                      </tr>
                      </tfoot>
                    </table>
                  </div>
                </div>
                <div class="xqui-table-page">
                  <pug-page
                    :page-index="currentPage"
                    :total="items.total"
                    :page-size="pageSize"
                    @change="pageChange">
                  </pug-page>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*
*
* [
   {
     id:1,
     name:"酒店1",
     children:[
         {id:4,name:"上海酒店"},
         {id:4,name:"上海酒店"},
         {id:4,name:"上海酒店"},
         {id:4,name:"北京酒店"}
     ]
   },
   {id:2,name:"自由行",children:[{}]},
   {id:3,name:"门票",children:[{}]},

* ]
* */

import categoryService from '@/services/productCategory';
import pugMessage from "@/plugins/PugMessage";
import {isEmpty} from "@/utils/validate";

export default {
  name: "CategoryList.vue",
  components: {},
  data() {
    return {
      pindex: -1,
      cindex: -1,
      pageSize: 20, //每页显示20条数据
      currentPage: 1, //当前页码
      count: 100, //总记录数
      category: {id: "", name: "", icon: "", sorted: "", pid: 0, status: 1, children: []},
      showEdit: false,
      items: []
    }
  },

  created() {
    this.loadData();
  },

  methods: {
    //获取数据
    loadData() {
      categoryService.findProductCategories().then(res => {
        if (res.status == 200) {
          var arr = res.data;
          arr.forEach(item => item.expand = false);
          this.items = arr;
        }
      })
    },

    // 添加显示
    addCategory() {
      var sort = this.items.length + 1;
      this.category = {id: "", name: "", icon: "", sorted: sort, pid: 0, status: 1, children: []};
      this.showEdit = true;
    },

    // 取消添加
    cancleCategory() {
      this.category = {id: "", name: "", icon: "", sorted: "", pid: 0, status: 1, children: []};
      this.showEdit = false;
    },

    // 保存分类
    saveCategory() {
      // 添加就是给数组中追加元素即可
      var params = this.category;
      // 验证
      if (isEmpty(params.name)) {
        pugMessage.error("请输入分类名称!!!");
        return;
      }

      // 保存到数据
      categoryService.saveCategory(params).then(res => {
        if (res.status == 200) {
          if (params.id) {
            pugMessage.success("修改成功!!!");
            // 修改
            if (params.pid == 0) {
              this.loadData();
              // 修改父集(如果子变父有bug)
              //this.items[this.pindex] = res.data;
            } else {
              // 修改子集 这里也有问题
              //this.items[this.pindex].children.splice(this.cindex, 1, res.data);
              this.loadData();
            }
          } else {
            // 添加
            pugMessage.success("添加成功!!!");
            // 添加新的元素到数组中
            this.category = res.data;
            // 如果是父级
            if (params.pid == 0) {
              this.category.children = [];
              this.items.push(this.category);
            } else {
              // 如果是子集
              // 没有实时增加
              //this.items[this.pindex].children.push(category);
              this.loadData();
            }
          }
          // 把上次添加的数据清空
          this.category = {};
          // 关闭添加
          this.showEdit = false;
        }
      });
    },

    // 编辑商品
    updateItem(index, cindex) {
      this.pindex = index;
      this.cindex = cindex;
      // 1:根据index获取编辑的数据
      var category = cindex == -1 ? this.items[index] : this.items[index].children[cindex];
      this.category = {
        id: category.id,
        name: category.name,
        pid: category.pid,
        icon: category.icon,
        sorted: category.sorted,
      };
      // 2： 打开编辑框
      this.showEdit = true;
    },

    // 添加子集
    addChildItem(index) {
      // 1： 打开编辑框
      this.showEdit = true;
      // 2:根据index获取编辑的数据
      var id = this.items[index].id;
      var sorted = this.items[index].children.length + 1;
      this.pindex = index;
      this.category = {pid: id, sorted: sorted};
    },

    //从page组件传递过来的当前page
    pageChange(page) {
      this.currentPage = page
    },

    expandChild(index) {
      this.pindex = index;
      this.items[index].expand = !this.items[index].expand;
      this.items[index].children.map(c => c.expand = this.items[index].expand);
    }
  }

}
</script>

<style scoped>


</style>
